
import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { findTopCategory } from '@/api/category'
function useCategory () {
  const categoryData = ref({})
  const route = useRoute() // this.$route
  // 如果传递 我们就用传下来的参数 如果不传就用默认参
  async function loadCategory (id = route.params.id) {
    // 路由的id  this.$route.params.id
    // useRoute:获取参数  useRouter：跳转方法
    const res = await findTopCategory(id)
    categoryData.value = res.result
  }
  loadCategory()

  // 路由更新时自定执行
  onBeforeRouteUpdate((to) => {
    console.log('路由更新了')
    // 获取当前最新的路由参数id 以这个新id去发送接口请求
    // loadCategory() 获取到的是老的id 要的是新的id
    const id = to.params.id
    loadCategory(id)
  })
  return {
    categoryData
  }
}

export { useCategory }
